<template>
  <div class="bgc">
    <!-- 搜索框 -->
    <van-search
      v-model="value"
      round
      placeholder="搜索"
      color="orange"
      input-align="center"
      background="#d0355d"
      show-action
      @focus="$router.push('/search')"
    >
      <template #action>
        <van-icon name="bell" color="#fff" size="20" />
      </template>
    </van-search>
    <!--导航选择栏 -->
    <van-tabs
      v-model="active"
      color="#fff"
      title-active-color="#fff"
      title-inactive-color="rgba(255, 255, 255,.6)"
    >
      <van-tab v-for="item in ownList" :key="item.id" :title="item.name">
      </van-tab>
      <!-- 频道按钮 -->
      <van-icon color="#fff" name="wap-nav" />
    </van-tabs>
    <div class="content-box">
      <!-- 轮播图 -->
      <div class="pic-box">
        <van-swipe
          :autoplay="3000"
          width="375"
          height="200"
          indicator-color="#fff"
        >
          <van-swipe-item>
            <img v-lazy="require('../../assets/new1.png')" />
          </van-swipe-item>
          <van-swipe-item>
            <img v-lazy="require('../../assets/new2.png')" />
          </van-swipe-item>
          <van-swipe-item>
            <img v-lazy="require('../../assets/new3.png')" />
          </van-swipe-item>
        </van-swipe>
      </div>

      <!-- 分割线 -->
      <div class="online"></div>

      <!-- Layout 布局 -->
      <div class="newList-box">
        <div class="list-box" v-for="item in 5" :key="item">
          <van-row type="flex" justify="space-between">
            <van-col span="14">
              <h2>台风"木兰"已登录！还要继续传拖鞋上班吗？</h2>
              <p class="autor">深圳i-3分钟前</p>
              <div class="check-box">
                <span><van-icon name="eye" color="#afa8ac" /> 29988</span>
                <span><van-icon name="comment" color="#afa8ac" /> 2999</span>
              </div>
            </van-col>
            <van-col span="9">
              <van-image
                fit="cover"
                :src="require('@/assets/wind.jpg')"
                radius="5"
              />
            </van-col>
          </van-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { clickChannelsAPI } from '@/api/channels'
import ChannelEdit from '@/views/MyHome/ChannelEdit.vue'
export default {
  components: {
    ChannelEdit
  },
  data() {
    return {
      value: '',
      editShow: false,
      active: 0,
      ownList: []
    }
  },
  async created() {
    const res = await clickChannelsAPI()
    this.ownList = res.data.channels
  }
}
</script>

<style lang="less" scoped>
.bgc {
  width: 100vw;
  height: 100px;
  background-color: #d0355d;
  .van-search {
    width: 365px;
    color: aliceblue;
    .van-search__content {
      background-color: rgba(255, 255, 255, 0.4);
      border-radius: 14px;
    }
  }
  .van-icon {
    margin-left: 10px;
  }
}
::v-deep .van-icon-search:before {
  color: #fff;
  position: absolute;
  top: 0;
  left: 114px;
  font-weight: 700;
}
::v-deep .van-field__control[type='search']::-webkit-input-placeholder {
  color: rgb(234, 233, 233);
  padding-left: 10px;
}
.van-tabs {
  ::v-deep .van-tabs__nav {
    margin-right: 36px;
    position: relative;
    background-color: transparent;
    .van-tabs__line {
      bottom: 20px;
    }
  }
  .van-icon {
    position: absolute;
    right: 4px;
    top: 2px;
    background-color: #d0355d;
    font-size: 36px;
  }
}
img {
  width: 100%;
}
.newList-box {
  position: absolute;
  top: 300;
  bottom: 50;
  overflow: auto;
  .list-box {
    padding: 0 15px;
    margin-bottom: 20px;
    .van-image {
      width: 126px;
      height: 90px;
      border-radius: 10px;
    }
    h2 {
      font-size: 16px;
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
      -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
      -webkit-line-clamp: 2; /** 显示的行数 **/
      overflow: hidden; /** 隐藏超出的内容 **/
    }
    .autor {
      margin-top: 5px;
      font-size: 12px;
      color: #afa8ac;
    }
    .check-box {
      position: absolute;
      left: 4px;
      margin-top: 10px;
      span {
        color: #afa8ac;
        font-size: 10px;
      }
    }
  }
}

.online {
  margin: 20px 0;
  height: 10px;
  width: 100vw;
  background-color: #f4f4f4;
}

.content-box {
  position: fixed;
  top: 100px;
  bottom: 50px;
  width: 100%;
  overflow: auto;
}
</style>
